<script setup>
import { ref } from 'vue'
import DatePicker from '../components/DatePicker/DatePicker.vue'

// 初始化状态
const basicDate = ref(null)
const rangeDate = ref(null)
const disabledDate = ref(null)
const customDate = ref(null)
const inlineDate = ref(null)
const limitedDate = ref(null)

// 日期范围
const minDate = new Date('2024-01-01')
const maxDate = new Date('2024-12-31')

// 格式化函数
const formatDate = (date) => {
  if (!date) return '未选择'
  
  if (Array.isArray(date)) {
    if (!date.length) return '未选择'
    return date
      .map(d => {
        if (!d) return ''
        return d instanceof Date ? 
          d.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          }) : ''
      })
      .filter(Boolean)
      .join(' - ')
  }
  
  return date instanceof Date ? 
    date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    }) : '未选择'
}

// 禁用周末
const isWeekend = (date) => {
  if (!(date instanceof Date)) return false
  const day = date.getDay()
  return day === 0 || day === 6
}

// 事件处理
const handleChange = ({ value, isValid }) => {
  console.log('日期变化:', formatDate(value), '是否有效:', isValid)
}

const handleConfirm = (date) => {
  alert(`确认选择:${formatDate(date)}`)
}
</script>

<template>
  <div class="datepicker-demo">
    <!-- 基础示例 -->
    <section class="demo-block">
      <h3>基础用法</h3>
      <DatePicker
        v-model="basicDate"
        placeholder="请选择日期"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(basicDate) }}</div>
    </section>

    <!-- 日期范围选择 -->
    <section class="demo-block">
      <h3>日期范围</h3>
      <DatePicker
        v-model="rangeDate"
        :is-range="true"
        placeholder="请选择日期范围"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(rangeDate) }}</div>
    </section>

    <!-- 禁用周末 -->
    <section class="demo-block">
      <h3>禁用周末</h3>
      <DatePicker
        v-model="disabledDate"
        :disable-date="isWeekend"
        placeholder="请选择工作日"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(disabledDate) }}</div>
    </section>

    <!-- 自定义格式 -->
    <section class="demo-block">
      <h3>自定义格式</h3>
      <DatePicker
        v-model="customDate"
        format="MM/DD/YYYY"
        placeholder="月/日/年"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(customDate) }}</div>
    </section>

    <!-- 设置日期范围 -->
    <section class="demo-block" style="">
      <h3>限制可选日期范围</h3>
      <DatePicker
        v-model="limitedDate"
        :min-date="minDate"
        :max-date="maxDate"
        placeholder="选择2024年日期"
        @change="handleChange"
        @confirm="handleConfirm"
      />
      <div class="demo-value">选中值: {{ formatDate(limitedDate) }}</div>
    </section>

    <!-- 内联显示 -->
    <section class="demo-block1">
      <h3>内联显示</h3>
      <DatePicker
          v-model="inlineDate"
          :is-inline="true"
          @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(inlineDate) }}</div>
    </section>
  </div>
</template>

<style scoped>
.datepicker-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-block {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}


.demo-block1{
  margin-top: 300px;
}
h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.demo-value {
  margin-top: 10px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  border: 1px solid #e4e7ed;
}
</style>